<template>
    <div class="home-container">
        <el-container class="home-left">
            <img src="@/assets/img/logo.jpg" alt="logo" class="logo">
        </el-container>
        <el-container class="home-right">
            <el-text tag="b" type="success" size="large" class="gradient-text">
                Welcome to SYSU supermarket inventory management system!
            </el-text>
            <el-divider></el-divider>
            <el-text tag="b" type="success" size="large" class="gradient-text">
                欢迎来到中大超市库存管理系统！
            </el-text>
            <!-- <el-button @click="sendDataToBackend">click</el-button>
            <p>姓名: {{ responseData.name }}</p>
            <p>年龄: {{ responseData.age }}</p>
            <p>附加信息: {{ responseData.additionalInfo }}</p>
            <p>当前时间: {{ responseData.currentTime }}</p> 
            <transition name="el-fade-in-linear">
                <div v-show="show" class="gradient-text">hello</div>
            </transition> 
            <el-button @click="show = !show">click</el-button>
            <el-button plain @click="open">Click to open the Message Box</el-button> -->
        </el-container>
    </div>
</template>

<script setup lang="ts">
// // test
// import axios from 'axios';
// import { ElMessage,ElMessageBox } from 'element-plus';
// let show = ref(true);
// const responseData = ref({name:"aaa", age:9,
//                         additionalInfo: 'This is some additional information',
//                         currentTime: new Date().toISOString()});
// async function sendDataToBackend() {
//     const dataToSend = {
//         name: 'John Doe',
//         age: 30,
//     };
//     try {
        
//         // axios.defaults.baseURL = 'https://localhost:3000';
//         console.log("Sending data to backend...",axios.defaults);
//         const result = await axios.post('/api/data', dataToSend, );
//         responseData.value = result.data;
//         console.log("Received response from backend:", result.data);
//     } catch (error) {
//         console.error("Error sending data to backend:", error);
//     }
// }
// const open = () => {
//   ElMessageBox.confirm(
//     'proxy will permanently delete the file. Continue?',
//     'Warning',
//     {
//       confirmButtonText: 'OK',
//       cancelButtonText: 'Cancel',
//       type: 'warning',
//     }
//   )
//     .then(() => {
//       ElMessage({
//         type: 'success',
//         message: 'Delete completed',
//       })
//     })
//     .catch(() => {
//       ElMessage({
//         type: 'info',
//         message: 'Delete canceled',
//       })
//     })
// }
</script>

<style scoped>

.gradient-text {
    font-size:5cap;
    margin: 10px 0;
    background:linear-gradient(220.55deg, #FFE70B 0%, #27B643 100%);
    background-clip: text;
    color: transparent;
    /* -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent; */
}
.home-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.home-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo {
    width: 100%;
    height: auto;
}
.home-right {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
</style>